<template>
  <a-popover trigger="click" ref="selectMulRef" position="bl" @popup-visible-change="changePopup">
    <template #content>
      <div class="select-mul">
        <div class="header">
          <a-input v-model="filterVal" @input="getPortfoliosList" style="margin-bottom: 10px" placeholder="搜索内容" />
          <a-checkbox v-model="checkedAll" :indeterminate="indeterminate" value="1" @change="changeCheckAll">全选</a-checkbox>
        </div>
        <a-scrollbar style="max-height: 240px; overflow-y: auto">
          <a-checkbox-group v-model="editVal">
            <template v-for="(option, s) in allPortfoliosList" :key="s">
              <div class="checkbox-item">
                <a-checkbox :value="option.portfolioId">
                  <a-popover position="right" :content="option.shopName">
                    <p>{{ option.portfolioName }}</p>
                  </a-popover>
                </a-checkbox>
              </div>
            </template>
          </a-checkbox-group>
        </a-scrollbar>
        <div class="footer">
          <a-space>
            <a-button size="mini" @click="cancel">取消</a-button>
            <a-button size="mini" type="primary" @click="confirm">确认</a-button>
          </a-space>
        </div>
      </div>
    </template>
    <a-select v-model="selectVal" :popup-visible="false" value-key="portfolioId" :style="{ minWidth: info.width + 'px' }" :placeholder="info.placeholder || info.label" multiple :max-tag-count="1" allow-clear :allow-search="false" @change="changeSelect">
      <a-option v-for="(item, i) in allPortfoliosList" :key="i" :value="item" :label="item.portfolioName" />
    </a-select>
  </a-popover>
</template>
<script setup lang="ts">
  import { PropType, computed, ref, watch, watchEffect } from 'vue'
  import { FilterTableItem } from '@/types/components'
  import { getAllPortfoliosList } from '@/api/advert'

  const props = defineProps({
    info: {
      type: Object as PropType<FilterTableItem>,
      default: () => {},
    },
    defaultVal: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    resultTags: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
  })
  const selectVal = ref<Array<any>>([])
  const editVal = ref<Array<any>>([])
  const filterVal = ref('')
  const emit = defineEmits(['change', 'update:modelValue'])
  const indeterminate = ref(false)
  const checkedAll = ref(false)
  const selectMulRef = ref()
  const allPortfoliosList = ref<Array<any>>([])

  // 获取所有组合
  async function getPortfoliosList(val?: string) {
    const res: any = await getAllPortfoliosList({ search: val })
    allPortfoliosList.value = res?.data || []
  }
  getPortfoliosList()

  function changePopup(type: boolean) {
    if (type) {
      editVal.value = selectVal.value.map((el: any) => el.portfolioId)
      filterVal.value = ''
    }
  }
  function changeCheckAll(status: any) {
    if (status) {
      editVal.value = allPortfoliosList.value.map((el) => el?.portfolioId || '') || []
    } else {
      editVal.value = []
    }
  }
  watch(editVal, (newVal) => {
    if (!newVal?.length) {
      indeterminate.value = false
      checkedAll.value = false
    } else if (newVal?.length === allPortfoliosList.value?.length) {
      indeterminate.value = false
      checkedAll.value = true
    } else {
      indeterminate.value = true
      checkedAll.value = false
    }
  })
  watchEffect(() => {
    selectVal.value = [...(props.defaultVal || [])]
    props.defaultVal?.forEach((el: any) => {
      if (!allPortfoliosList.value.find((item: any) => item.portfolioId == el.portfolioId)) {
        allPortfoliosList.value.push(el)
      }
    })
  })

  function cancel() {
    editVal.value = selectVal.value.map((el: any) => el.portfolioId)
    selectMulRef.value.handlePopupVisibleChange(false)
  }
  function confirm() {
    let valArr = editVal.value.map((id: any) => {
      return {
        portfolioId: id,
        portfolioName: allPortfoliosList.value.find((el: any) => el.portfolioId == id)?.portfolioName,
      }
    })
    emit('change', valArr)
    selectMulRef.value.handlePopupVisibleChange(false)
  }
  function changeSelect() {
    editVal.value = selectVal.value.map((el: any) => el.portfolioId)
    confirm()
  }
</script>
<style lang="less" scoped>
  :deep(.arco-trigger-popup) {
    .arco-popover-popup-content {
      padding: 5px;
    }
  }
  .select-mul {
    width: 240px;
    .header {
      border-bottom: 1px solid var(--color-border);
      margin-bottom: 10px;
    }
    .arco-checkbox-group {
      width: 100%;
    }
    .checkbox-item {
      font-size: 12px;
      padding: 3px 0;
      &:hover {
        background-color: #f2f3f5;
      }
      .arco-checkbox {
        width: 100%;
        margin: 0;
      }
    }
    .footer {
      border-top: 1px solid var(--color-border);
      text-align: right;
      padding-top: 10px;
    }
  }
</style>
